<template>
  <div class="nr" ref="bill">
    <img src="../assets/shengchengtu/shanglogo.png" alt />
    <img class="fei" src="../assets/shengchengtu/fei.png" alt />
    <div class="write-kuai">
      <div class="info">
        <img class="touxiang" :src="details.avatar" alt />

        <div class="infonr">
          <div class="nickname">{{details.nickname}}</div>
          <div class="fans">粉丝 {{details.fan_count}} | 关注 {{details.follow_count}}</div>
          <div class="time">2020.04.23 14:16</div>
        </div>
      </div>

      <div class="ttile">{{details.title}}</div>

      <div v-if="type==1" style="font-size:14px;" class="ck-content1" v-html="details.content">
        <!-- class="box" <img src alt /> -->
      </div>

      <div v-if="type==2" style="font-size:14px;">
        <!-- class="box" <img src alt /> -->
        <!-- <video style="width:100%;" :src="details.video" controls="controls"></video> -->
        <img style="width:100%;" :src="details.cover" alt />
      </div>

      <div v-if="type==4" style="font-size:14px;">
        <!-- class="box" <img src alt /> -->
        <div
          class="jianjie"
          v-for="(item,index) in details.option_list"
          :key="index"
        >选项{{index}}: {{item.content}}</div>
      </div>

      <div v-if="type==3" style="font-size:14px;">
        <!-- class="box" <img src alt /> -->
        {{details.content}}
      </div>

      <div v-if="type==5" style="font-size:14px;">
        <!-- class="box" <img src alt /> -->
        <img style="width:100%;" :src="details.cover" alt />
      </div>
    </div>

    <img class="boxque" src="../assets/shengchengtu/quan.png" alt />
    <div class="write-kuai-xia">
      <div class="xianr">
        <div class="left">
          <img src="../assets/shengchengtu/xialogo.png" alt />
          <div class="tishizi">长按识别二维码，观看韩乐讯最新动态</div>
        </div>
        <!-- <img  :src="ercode" alt=""> -->

        <div class="right" id="qrcode"></div>
      </div>
    </div>

    <div class="bottom-box">
      <div class="heng"></div>
      <div class="bottom-zi">韩乐讯</div>
      <div class="heng"></div>
    </div>

    <!-- <img style="width:100%;" v-if="show" :src="canvasImageUrl" alt /> -->
  </div>
</template>

<script>
import QRCode from "qrcodejs2"; // 引入qrcode
import html2canvas from "html2canvas";
export default {
  data() {
    return {
      // key: value
      // isweixin: true,
      type: "",
      id: "",
      details: "",
      link: "",
      canvasImageUrl: "",
      show: false
    };
  },
  components: { QRCode },
  mounted() {
    this.type = this.$route.query.type;
    this.id = this.$route.query.id;
    console.log(window.location.href);

    this.link = window.location.href;

    this.link = this.link.replace("shengchengtu", "fenxiang");

    // var isweixin = this.isWeixin();
    // this.isweixin = isweixin;

    this.getall();

    this.getQrcode();
  },

  methods: {
    // htmlToCanvas() {
    //   html2canvas(this.$refs.bill, {}).then(canvas => {
    //     let imageUrl = canvas.toDataURL("image/png"); // 将canvas转成base64图片格式

    //     this.canvasImageUrl = imageUrl;
    //     var that = this;
    //     //发图片

    //     this.$axios({
    //       method: "post",
    //       url: "media/shows/base_save",
    //       data: this.$qs.stringify({
    //         img: that.canvasImageUrl,
    //         type: that.type,
    //         cid: that.id
    //       }),
    //       headers: {
    //         "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
    //       }
    //     }).then(response => {
    //       console.log(response);
    //       if (response.data.error == "0") {
    //       } else {
    //         this.$message({
    //           showClose: true,
    //           message: response.data.message,
    //           type: "error"
    //         });
    //       }
    //     });

    //     //     this.isDom = false;
    //   });
    // },

    getQrcode() {
      document.getElementById("qrcode").innerHTML = "";
      this.$nextTick(function() {
        //生成二维码
        this.qrcode();
      });
    },
    qrcode() {
      let that = this;
      let qrcode = new QRCode("qrcode", {
        width: 60,
        height: 60, // 高度
        text: this.link // 二维码内容
        // render: 'canvas' ,   // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        // background: '#f0f',   // 背景色
        // foreground: '#ff0'    // 前景色
      });
    },
    // isWeixin() {
    //   var ua = navigator.userAgent.toLowerCase(); //获取判断用的对象
    //   if (ua.match(/MicroMessenger/i) == "micromessenger") {
    //     return true; //微信打开
    //   } else {
    //     return false; //不是微信打开
    //   }
    // },
    async getall() {
      // 1文章2视频3问答4投票5小视频
      if (this.type == 1) {
        await this.$get(
          // method: "get",
          "media/shows/show",
          {
            id: this.id,
            type: this.type
          }
        ).then(response => {
          console.log(response);
          if (response.error == "0") {
            // this.xiaoxilist = response.data;
            this.details = response.data;
          } else {
            this.$message({
              showClose: true,
              message: response.message,
              type: "error"
            });
          }
        });
      }
      if (this.type == 2) {
        await this.$get(
          // method: "get",
          "media/shows/video_show",
          {
            id: this.id,
            type: this.type
          }
        ).then(response => {
          console.log(response);
          if (response.error == "0") {
            // this.xiaoxilist = response.data;
            this.details = response.data;
          } else {
            this.$message({
              showClose: true,
              message: response.message,
              type: "error"
            });
          }
        });
      }
      if (this.type == 3) {
        await this.$get(
          // method: "get",
          "media/shows/show",
          {
            id: this.id,
            type: this.type
          }
        ).then(response => {
          console.log(response);
          if (response.error == "0") {
            // this.xiaoxilist = response.data;
            this.details = response.data;
          } else {
            this.$message({
              showClose: true,
              message: response.message,
              type: "error"
            });
          }
        });
      }
      if (this.type == 4) {
        await this.$get(
          // method: "get",
          "media/shows/vote_show",
          {
            id: this.id,
            type: this.type
          }
        ).then(response => {
          console.log(response);
          if (response.error == "0") {
            // this.xiaoxilist = response.data;
            this.details = response.data;
          } else {
            this.$message({
              showClose: true,
              message: response.message,
              type: "error"
            });
          }
        });
      }
      if (this.type == 5) {
        await this.$get(
          // method: "get",
          "media/shows/short_videoshow",
          {
            id: this.id,
            type: this.type
          }
        ).then(response => {
          console.log(response);
          if (response.error == "0") {
            // this.xiaoxilist = response.data;
            this.details = response.data;
          } else {
            this.$message({
              showClose: true,
              message: response.message,
              type: "error"
            });
          }
        });
      }

      // this.$nextTick(() => {
      //   // 跳用html转化canvas函数
      //   var that = this;
      //   setTimeout(function() {
      //     that.htmlToCanvas();
      //   }, 500);
      // });
      // this.htmlToCanvas();
    }
  }
};
</script>

<style scoped>
>>> .ck-content1 img{
  width:100%;
}
>>> .textAlignCenter{
  text-indent: 0!important;
}

.ck-content1 {
  height: auto;
  margin-top: 0;
  padding: 0 !important ;
  /* position: relative; */
  border: none !important;
}
.bottom-box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.44rem;
}
.bottom-zi {
  font-size: 0.2rem;
  margin: 0 0.05rem;
  color: rgba(255, 255, 255, 1);
}
.heng {
  width: 0.6rem;
  height: 1px;
  background: rgba(255, 255, 255, 1);
}
.tishizi {
  font-size: 0.24rem;

  color: rgba(178, 178, 178, 1);
}
.ercode {
  width: 1.04rem;
  height: 1.04rem;
}
.xianr {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.boxque {
  width: 100%;
  height: 0.44rem;
  display: block;
}

.ttile {
  font-size: 0.28rem;
  margin-top: 0.22rem;
  line-height: 0.4rem;
  color: rgba(48, 49, 51, 1);
  opacity: 1;
}
.info {
  display: flex;
  align-items: center;
}
.touxiang {
  width: 1rem;
  height: 1rem;
  background: rgba(0, 0, 0, 0);
  border-radius: 50%;
  opacity: 1;
  display: block;
}
.infonr {
}
.nickname {
  font-size: 0.28rem;
  color: rgba(48, 49, 51, 1);
}
.fans {
  font-size: 0.24rem;
  color: rgba(22, 24, 36, 1);
}
.time {
  font-size: 0.2rem;

  color: rgba(178, 178, 178, 1);
}

.nr {
  width: 100%;
  /* height: 100vh; */
  background: url(../assets/shengchengtu/bg.png);
  background-size: 100% 100%;
  padding: 0.5rem 0.2rem;
  position: relative;
  box-sizing: border-box;
}
.write-kuai {
  width: 7.12rem;
  margin: 0.14rem auto 0;
  background: rgba(255, 255, 255, 1);
  border-radius: 0.4rem 0.4rem 0 0;
  padding: 0.42rem;
  box-sizing: border-box;
}
.write-kuai-xia {
  width: 7.12rem;
  margin: 0 auto;
  background: rgba(255, 255, 255, 1);
  border-radius: 0 0 0.4rem 0.4rem;
  padding: 0.42rem;
  box-sizing: border-box;
}
.fei {
  position: absolute;
  right: 0.64rem;
  top: 0.05rem;
}
</style>

<style>
/*
 * CKEditor 5 (v19.1.1) content styles.
 * Generated on Tue, 09 Jun 2020 10:37:49 GMT.
 * For more information, check out https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html
 */

:root {
  --ck-highlight-marker-blue: hsl(201, 97%, 72%);
  --ck-highlight-marker-green: hsl(120, 93%, 68%);
  --ck-highlight-marker-pink: hsl(345, 96%, 73%);
  --ck-highlight-marker-yellow: rgb(253, 253, 119);
  --ck-highlight-pen-green: hsl(112, 100%, 27%);
  --ck-highlight-pen-red: hsl(0, 85%, 49%);
  --ck-image-style-spacing: 1.5em;
  --ck-todo-list-checkmark-size: 16px;
}

/* ckeditor5-image/theme/imageresize.css */
.ck-content1 .image.image_resized {
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content1 .image.image_resized img {
  width: 100%;
}
/* ckeditor5-image/theme/imageresize.css */
.ck-content1 .image.image_resized > figcaption {
  display: block;
}
/* ckeditor5-image/theme/imagecaption.css */
.ck-content1 .image > figcaption {
  display: table-caption;
  caption-side: bottom;
  word-break: break-word;
  color: hsl(0, 0%, 20%);
  background-color: hsl(0, 0%, 97%);
  padding: 0.6em;
  font-size: 0.75em;
  outline-offset: -1px;
}
/* ckeditor5-basic-styles/theme/code.css */
.ck-content1 code {
  background-color: hsla(0, 0%, 78%, 0.3);
  padding: 0.15em;
  border-radius: 2px;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content1 .image-style-side,
.ck-content1 .image-style-align-left,
.ck-content1 .image-style-align-center,
.ck-content1 .image-style-align-right {
  max-width: 50%;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content1 .image-style-side {
  float: right;
  margin-left: var(--ck-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content1 .image-style-align-left {
  float: left;
  margin-right: var(--ck-image-style-spacing);
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content1 .image-style-align-center {
  margin-left: auto;
  margin-right: auto;
}
/* ckeditor5-image/theme/imagestyle.css */
.ck-content1 .image-style-align-right {
  float: right;
  margin-left: var(--ck-image-style-spacing);
}
/* ckeditor5-block-quote/theme/blockquote.css */
.ck-content1 blockquote {
  overflow: hidden;
  padding-right: 1.5em;
  padding-left: 1.5em;
  margin-left: 0;
  margin-right: 0;
  font-style: italic;
  border-left: solid 5px hsl(0, 0%, 80%);
}
/* ckeditor5-block-quote/theme/blockquote.css */
.ck-content1[dir="rtl"] blockquote {
  border-left: 0;
  border-right: solid 5px hsl(0, 0%, 80%);
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content1 pre {
  padding: 1em;
  color: hsl(0, 0%, 20.8%);
  background: hsla(0, 0%, 78%, 0.3);
  border: 1px solid hsl(0, 0%, 77%);
  border-radius: 2px;
  text-align: left;
  direction: ltr;
  tab-size: 4;
  white-space: pre-wrap;
  font-style: normal;
  min-width: 200px;
}
/* ckeditor5-code-block/theme/codeblock.css */
.ck-content1 pre code {
  background: unset;
  padding: 0;
  border-radius: 0;
}
/* ckeditor5-horizontal-line/theme/horizontalline.css */
.ck-content1 hr {
  border-width: 1px 0 0;
  border-style: solid;
  border-color: hsl(0, 0%, 37%);
  margin: 0;
}
/* ckeditor5-image/theme/image.css */
.ck-content1 .image {
  display: table;
  clear: both;
  text-align: center;
  margin: 1em auto;
}
/* ckeditor5-image/theme/image.css */
.ck-content1 .image > img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  min-width: 50px;
}
/* ckeditor5-table/theme/table.css */
.ck-content1 .table {
  margin: 1em auto;
  display: table;
}
/* ckeditor5-table/theme/table.css */
.ck-content1 .table table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  height: 100%;
  border: 1px double hsl(0, 0%, 70%);
}
/* ckeditor5-table/theme/table.css */
.ck-content1 .table table td,
.ck-content1 .table table th {
  min-width: 2em;
  padding: 0.4em;
  border: 1px solid hsl(0, 0%, 75%);
}
/* ckeditor5-table/theme/table.css */
.ck-content1 .table table th {
  font-weight: bold;
  background: hsla(0, 0%, 0%, 5%);
}
/* ckeditor5-table/theme/table.css */
.ck-content1[dir="rtl"] .table th {
  text-align: right;
}
/* ckeditor5-table/theme/table.css */
.ck-content1[dir="ltr"] .table th {
  text-align: left;
}
/* ckeditor5-media-embed/theme/mediaembed.css */
.ck-content1 .media {
  clear: both;
  margin: 1em 0;
  display: block;
  min-width: 15em;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list {
  list-style: none;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list li {
  margin-bottom: 5px;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list li .todo-list {
  margin-top: 5px;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list .todo-list__label > input {
  -webkit-appearance: none;
  display: inline-block;
  position: relative;
  width: var(--ck-todo-list-checkmark-size);
  height: var(--ck-todo-list-checkmark-size);
  vertical-align: middle;
  border: 0;
  left: -25px;
  margin-right: -15px;
  right: 0;
  margin-left: 0;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list .todo-list__label > input::before {
  display: block;
  position: absolute;
  box-sizing: border-box;
  content: "";
  width: 100%;
  height: 100%;
  border: 1px solid hsl(0, 0%, 20%);
  border-radius: 2px;
  transition: 250ms ease-in-out box-shadow, 250ms ease-in-out background,
    250ms ease-in-out border;
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list .todo-list__label > input::after {
  display: block;
  position: absolute;
  box-sizing: content-box;
  pointer-events: none;
  content: "";
  left: calc(var(--ck-todo-list-checkmark-size) / 3);
  top: calc(var(--ck-todo-list-checkmark-size) / 5.3);
  width: calc(var(--ck-todo-list-checkmark-size) / 5.3);
  height: calc(var(--ck-todo-list-checkmark-size) / 2.6);
  border-style: solid;
  border-color: transparent;
  border-width: 0 calc(var(--ck-todo-list-checkmark-size) / 8)
    calc(var(--ck-todo-list-checkmark-size) / 8) 0;
  transform: rotate(45deg);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list .todo-list__label > input[checked]::before {
  background: hsl(126, 64%, 41%);
  border-color: hsl(126, 64%, 41%);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list .todo-list__label > input[checked]::after {
  border-color: hsl(0, 0%, 100%);
}
/* ckeditor5-list/theme/todolist.css */
.ck-content1 .todo-list .todo-list__label .todo-list__label__description {
  vertical-align: middle;
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content1 .marker-yellow {
  background-color: var(--ck-highlight-marker-yellow);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content1 .marker-green {
  background-color: var(--ck-highlight-marker-green);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content1 .marker-pink {
  background-color: var(--ck-highlight-marker-pink);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content1 .marker-blue {
  background-color: var(--ck-highlight-marker-blue);
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content1 .pen-red {
  color: var(--ck-highlight-pen-red);
  background-color: transparent;
}
/* ckeditor5-highlight/theme/highlight.css */
.ck-content1 .pen-green {
  color: var(--ck-highlight-pen-green);
  background-color: transparent;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content1 .page-break {
  position: relative;
  clear: both;
  padding: 5px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content1 .page-break::after {
  content: "";
  position: absolute;
  border-bottom: 2px dashed hsl(0, 0%, 77%);
  width: 100%;
}
/* ckeditor5-page-break/theme/pagebreak.css */
.ck-content1 .page-break__label {
  position: relative;
  z-index: 1;
  padding: 0.3em 0.6em;
  display: block;
  text-transform: uppercase;
  border: 1px solid hsl(0, 0%, 77%);
  border-radius: 2px;
  font-family: Helvetica, Arial, Tahoma, Verdana, Sans-Serif;
  font-size: 0.75em;
  font-weight: bold;
  color: hsl(0, 0%, 20%);
  background: hsl(0, 0%, 100%);
  box-shadow: 2px 2px 1px hsla(0, 0%, 0%, 0.15);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content1 .text-tiny {
  font-size: 0.7em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content1 .text-small {
  font-size: 0.85em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content1 .text-big {
  font-size: 1.4em;
}
/* ckeditor5-font/theme/fontsize.css */
.ck-content1 .text-huge {
  font-size: 1.8em;
}
@media print {
  /* ckeditor5-page-break/theme/pagebreak.css */
  .ck-content1 .page-break {
    padding: 0;
  }
  /* ckeditor5-page-break/theme/pagebreak.css */
  .ck-content1 .page-break::after {
    display: none;
  }
}
</style>